<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&nbsp;&nbsp;&nbsp;登陆三生锁</title>
    <script src="{$Think.const.JS_URL}jquery-2.2.3.min.js"></script>
    <link rel="stylesheet" href="{$Think.const.CSS_URL}login.css" type="text/css">
    <link rel="stylesheet" href="{$Think.const.CSS_URL}bootstrap.min.css" type="text/css">
</head>
<body>
<!--标题栏-->
    <div class="header">
        <div class = "container">
            <div class = "header_left" >
                <a href="../Index/index.html"><img src="{$Think.const.img_url}logo.png"></a>
                <span>Honey Store</span>
            </div>
        </div>
    </div>
<!--图片，表单栏-->
    <div class = "login-panel" >
        <div class = "container">
            <div class = "show_img col-sm-7">
                <img src="{$Think.const.img_url}login-img.jpg" style="width: 100%">
            </div>
            <div class = "form col-sm-5" >
                <form class="form-horizontal" role="form" method="post" action="Login" onsubmit = "return checkForm()">
                    <div class="form-group">
                        <label for="username" class="col-sm-2 control-label">用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="username" name = "u_name"placeholder="请输入您的用户名" autofocus>
                        </div>
                    </div>
                    <div class = "tips">
                        <label class="col-sm-2 control-label"> </label>
                        <span id = "tips1"> </span>
                    </div>
                    <div class="form-group">
                        <label for="psd" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="psd" name = "u_psd" placeholder="请输入您的密码">
                        </div>
                    </div>
                    <div class = "tips form-group">
                        <label class="col-sm-2 control-label"> </label>
                        <span id = "tips2"> </span>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn submit_button" id = "login">登录</button>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <div class="checkbox">
                                <label>
                                    <input type="checkbox" checked> 记住用户名
                                </label>
                                <div class = "tool">
                                    <a href = "#">忘记密码?</a>
                                    <span>|</span>
                                    <a href = "regist.html">免费注册</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
<!--专利栏-->
    <div class = "footer">
        <div class = "container">
            <p>Copyright 2008-2015 Sanshengsuo.com，All Rights Reserved ICP证：粤 B2-XXXXXXXXX</p>
        </div>
    </div>
</body>
</html>
<script type="text/javascript">
    window.onload = attachEvent;
    function attachEvent(){
        $("#username").blur(checkUserName);//检测用户名输入框是否为空
        $("#psd").blur(checkPsw);//检测密码输入框是否为空
        $("#login").click(checkForm);//检测整个表单
    }
    function checkUserName(){
        if($("#username").val() == ""){
            $("#tips1").text("用户名不能为空");
            return false;
        }
        return true;
    }
    function checkPsw(){
        if($("#psd").val() == ""){
            $("#tips2").text("密码不能为空");
            return false;
        }
        return true;
    }
    function checkForm(){
        return checkPsw()&checkUserName();
    }
</script>